<template>
	<Page title="交通费用管理">
		<template #body>
			<van-pull-refresh v-model="main.pullRefresh" @refresh="onRefresh">
				<van-row>
					<van-col span="24" class="vanrow-col">
						<van-button type="primary" size="small" class="addTermStyle"
							@click="main.showAddCarFareDialog = true">
							添加包干项
						</van-button>
					</van-col>
				</van-row>

				<van-dialog v-model:show="main.showAddCarFareDialog" title="添加包干项" show-cancel-button
					@confirm="confirmAddCarFareDialog">
					<van-cell-group>
						<!-- 输入任意文本 -->
						<van-field v-model="main.addCarFareDialogInfo.address" label="地址" rows="1" autosize
							type="textarea" placeholder="请输入具体地址" />
						<!-- 允许输入数字，调起带符号的纯数字键盘 -->
						<van-field v-model="main.addCarFareDialogInfo.fare" type="number" label="包干费"
							placeholder="请输入包干费（含往返）" />
					</van-cell-group>
				</van-dialog>

				<van-dialog v-model:show="main.showEditCarFareDialog" title="管理包干项" show-cancel-button
					@confirm="confirmEditCarFareDialog">
					<van-cell-group>
						<!-- 输入任意文本 -->
						<van-field v-model="main.editCarFareDialogInfo.address" label="地址" rows="1" autosize
							type="textarea" placeholder="请输入具体地址" />
						<!-- 允许输入数字，调起带符号的纯数字键盘 -->
						<van-field v-model="main.editCarFareDialogInfo.fare" type="number" label="包干费"
							placeholder="请输入包干费（含往返）" />
					</van-cell-group>
				</van-dialog>

				<van-swipe-cell v-for="item in main.lumpSumCarFare" :key="item.id">
					<van-cell :title="item.address" is-link :value="item.fare" icon="after-sale">
						<template #value>
							<div class="carFareStyle">¥{{ item.fare }}</div>
						</template>
					</van-cell>
					<template #right>
						<van-button square type="danger" text="删除" @click="delCarFareTerm(item)" />
						<van-button square type="primary" text="编辑" @click="editCarFareTerm(item)" />
					</template>
				</van-swipe-cell>
			</van-pull-refresh>
		</template>
	</Page>
</template>

<script setup lang="ts" name="LumpSumCarFareManagement">
import { reactive } from "vue"
import LumpSumCarFareManagementClass, {
	TLumpSumCarFare,
} from "./LumpSumCarFareManagement"
import { nanoid } from "nanoid"
import TravelRecordLibraryStore from "@/store/TravelRecordLibraryStore"
import { showToast } from "vant"
import _ from "lodash"

const main = reactive(new LumpSumCarFareManagementClass())
const store = TravelRecordLibraryStore()

main.lumpSumCarFare = _.cloneDeep(store.LumpSumCarFareLibrary)

const onRefresh = () => {
	main.lumpSumCarFare = _.cloneDeep(store.LumpSumCarFareLibrary)
	main.pullRefresh = false
	showToast({
		message: "刷新成功",
		position: "top",
	})
}

const confirmEditCarFareDialog = () => {
	main.lumpSumCarFare.some(item => {
		if (item.id == main.editCarFareDialogInfo.id) {
			item.address = main.editCarFareDialogInfo.address
			item.fare = main.editCarFareDialogInfo.fare
			return true
		}
	})
	store.LumpSumCarFareLibrary = _.cloneDeep(main.lumpSumCarFare)
	showToast("修改成功!")
}

const editCarFareTerm = (carFace: TLumpSumCarFare) => {
	main.editCarFareDialogInfo = _.cloneDeep(carFace)
	main.showEditCarFareDialog = true
}

const delCarFareTerm = (carFare: TLumpSumCarFare) => {
	main.lumpSumCarFare = main.lumpSumCarFare.filter(
		item => item.id !== carFare.id
	)
	store.LumpSumCarFareLibrary = _.cloneDeep(main.lumpSumCarFare)
	showToast(`${carFare.address} 已删除`)
}

const confirmAddCarFareDialog = () => {
	if (
		main.lumpSumCarFare.some(
			item => item.address === main.addCarFareDialogInfo.address
		)
	) {
		showToast(`${main.addCarFareDialogInfo.address} 已存在`)
		return
	}
	main.addCarFareDialogInfo.id = nanoid(6)
	main.lumpSumCarFare.unshift(_.cloneDeep(main.addCarFareDialogInfo))
	store.LumpSumCarFareLibrary.unshift(_.cloneDeep(main.addCarFareDialogInfo))
	main.addCarFareDialogInfo =
		new LumpSumCarFareManagementClass().addCarFareDialogInfo
	main.showAddCarFareDialog = false
}
</script>

<style scoped lang="scss">
::v-deep(.body) {
	padding: 0 0 10px;
}

.vanrow-col {
	padding: 10px;

	.addTermStyle {
		width: 100%;
		font-size: 15px;
	}
}

.carFareStyle {
	color: $error-color;
	font-size: 15px;
}

.van-pull-refresh {
	overflow: unset;
}
</style>
